<!-- 顶部标题栏组件 -->
<template>
  <van-nav-bar :title="headName" :left-arrow="leftArrow" @click-left="onClickLeft">
    <!-- <template #right v-if="isRightShow">
      <span>首页</span>
    </template> -->
  </van-nav-bar>
</template>

<script>
export default {
  name: 'TopHeader',
  components: {},
  data () {
    return {
      headName: '', // 标题
      imgSrc: '' // 用户图像
    }
  },
  props: {
    // 是否有返回上一页按钮
    leftArrow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    isRightShow: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  // computed: {
  //   userImg () {
  //     return this.$store.getters.avatar
  //   }
  // },
  // watch: {
  //   userImg: {
  //     handler (newVal) {
  //       this.imgSrc = newVal
  //     },
  //     immediate: true
  //   }
  // },
  created () {
    this.headName = this.$route.meta.title
  },
  methods: {
    // 返回上一页
    onClickLeft () {
      if (this.leftArrow) {
        this.$router.back(-1)
      }
    }
    // 返回用户页
    // onClickRight () {
    //   if (this.$route.path !== '/user') {
    //     this.$router.push({ path: '/user' })
    //   }
    // }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  height: 1.2rem;
  background: burlywood;
  /deep/ .van-icon {
    color: #fff;
  }
  /deep/ .van-ellipsis {
    color: #fff;
  }
}
</style>
